<template>
    <div>
        <el-card>
            <!--      搜索与添加区域-->
            <el-row :gutter="20" style="margin-bottom: 10px">
                <el-col :span="10">
                    <el-input placeholder="请输入内容" v-model="queryInfo.searchInfo" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>

            </el-row>

            <!--        表格-->
            <el-table

                    :data="pageuserlist"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        align="center"
                        type="index"
                        prop="userId"
                        label="#">
                    <!-- width="150">-->
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="userName"
                        label="姓名"
                        width="180">
                    <!--                    width="180">-->
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="userPhone"
                        label="手机号码"
                >
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="userCard"
                        width="180px"
                        label="身份证号码">
                    <!--                    width="220">-->
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="userRole"
                        :filters="[{ text: '管理员', value: 'admin' },
                                { text: '普通用户', value: 'user' }]"
                        :filter-method="filterTag"
                        filter-placement="bottom-end"
                        label="用户类型"
                        width="120px"
                        :formatter="setRole">


                </el-table-column>


                <el-table-column
                        align="center"
                        prop="userStatus"
                        sortable
                        label="审核状态"
                        :formatter="setStatus">
                    <!--                    width="220">-->
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作"
                        width="360px"
                >
                    <template slot-scope="scope">

                        <el-button @click="showEditDialog(scope.row)" :enterable="false" size="small">查看</el-button>
                        <el-button @click="editEditDialog(scope.row)" :enterable="false" type="primary" size="small">
                            编辑
                        </el-button>
                        <el-button @click="pwdEditDialog(scope.row)" :enterable="false" type="danger" size="small">密码</el-button>
                        <el-button @click="checkEditDialog(scope.row)" :enterable="false" type="warning" size="small">审核
                        </el-button>
                        <el-button @click="createDialog()" :enterable="false" type="success" size="small">新增</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1, 5, 7, 10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>
        <!--    查看用户信息的对话框-->
        <el-dialog
                title="查看用户信息"
                :visible.sync="showDialogVisible"
                width="50%" @close="showDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" ref="editFormRef" status-icon label-width="100px">
                <!--                图片信息-->
                <el-form-item prop="garbageName" label="用户姓名">
                    <el-input class="rt-input" v-model="editForm.userName" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item prop="sortName" label="手机号码">
                    <el-input class="rt-input" v-model="editForm.userPhone" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item prop="sortInfo" label="身份证号">
                    <el-input class="rt-input" v-model="editForm.userCard" autocomplete="off" disabled></el-input>
                </el-form-item>
                <el-form-item prop="createTime" label="用户类型">
                    <el-input class="rt-input" v-model="editForm.formatRole" autocomplete="off" disabled></el-input>
                </el-form-item>
            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showDialogClosed">确定</el-button>
        </span>
        </el-dialog>
        <!--    修改用户信息的对话框-->
        <el-dialog
                title="修改用户信息"
                :visible.sync="editDialogVisible"
                width="50%" @close="editDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" status-icon ref="editFormRef" label-width="100px">
                <el-form-item prop="userId" label="用户编号">
                    <el-input class="rt-input" v-model="editForm.userId" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userName" :rules="[{ required: true, message: '名称不能为空'}]" label="用户名称">
                    <el-input class="rt-input" v-model="editForm.userName"></el-input>
                </el-form-item>
                <el-form-item prop="userPhone" label="手机号码">
                    <el-input class="rt-input" v-model="editForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item prop="userCard" label="身份证号码">
                    <el-input class="rt-input" v-model="editForm.userCard"></el-input>
                </el-form-item>
                <el-form-item prop="userRole" label="用户类型">
                    <el-select v-model="editForm.userRole" placeholder="this">
                        <el-option
                                v-for="item in roleList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetEdit">重置修改</el-button>
              <el-button type="primary" @click="editUser">确定修改</el-button>
            </span>
        </el-dialog>

        <!--    审核用户信息的对话框-->
        <el-dialog
                title="审核用户信息"
                :visible.sync="checkDialogVisible"
                width="50%" @close="checkDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" status-icon ref="editFormRef" label-width="100px">
                <el-form-item prop="userId" label="用户编号">
                    <el-input class="rt-input" v-model="editForm.userId" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userName" :rules="[{ required: true, message: '名称不能为空'}]" label="用户名称">
                    <el-input class="rt-input" v-model="editForm.userName" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userPhone" label="手机号码">
                    <el-input class="rt-input" v-model="editForm.userPhone" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userCard" label="身份证号码">
                    <el-input class="rt-input" v-model="editForm.userCard" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userStatus" label="用户状态">
                    <el-select v-model="editForm.userStatus" placeholder="this">
                        <el-option
                                v-for="item in statusList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetEdit">重置修改</el-button>
              <el-button type="primary" @click="checkUser">确定审核</el-button>
            </span>
        </el-dialog>

        <!--            新增用户信息的对话框-->
        <el-dialog
                title="新增用户信息"
                :visible.sync="createDialogVisible"
                width="50%" @close="createDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" ref="editFormRef" status-icon label-width="100px">

                <el-form-item prop="userName" :rules="[{ required: true, message: '名称不能为空'}]" label="用户名称">
                    <el-input class="rt-input" v-model="editForm.userName"></el-input>
                </el-form-item>
                <el-form-item prop="userPhone" :rules="[{ required: true, message: '手机号码不能为空'}]" label="手机号码">
                    <el-input class="rt-input" v-model="editForm.userPhone"></el-input>
                </el-form-item>
                <el-form-item prop="userPwd" :rules="[{ required: true, message: '密码不能为空'}]" label="密码">
                    <el-input class="rt-input" show-password v-model="editForm.userPwd"></el-input>
                </el-form-item>
                <el-form-item prop="userCard" :rules="[{ required: true, message: '身份证号码不能为空'}]" label="身份证号码">
                    <el-input class="rt-input" v-model="editForm.userCard"></el-input>
                </el-form-item>
                <el-form-item prop="userRole" :rules="[{ required: true, message: '用户类型不能为空'}]" label="用户类型">
                    <el-select v-model="editForm.userRole" placeholder="请选择">
                        <el-option
                                v-for="item in roleList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetCreate">重置</el-button>
              <el-button @click="createUser" type="primary">确定</el-button>
            </span>
        </el-dialog>

        <!--            修改用户密码的对话框-->
        <el-dialog
                title="修改用户密码"
                :visible.sync="pwdEditDialogVisible"
                width="50%" @close="pwdEditDialogClosed">
            <!--      内容主体区域-->
            <el-form :model="editForm" ref="editFormRef" status-icon label-width="100px">

                <el-form-item prop="userId" label="用户编号">
                    <el-input class="rt-input" v-model="editForm.userId" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userName"  label="用户名称">
                    <el-input class="rt-input" v-model="editForm.userName" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userPhone" label="手机号码">
                    <el-input class="rt-input" v-model="editForm.userPhone" disabled></el-input>
                </el-form-item>
                <el-form-item prop="userPwd" :rules="[{ required: true, message: '密码不能为空'}]" label="密码">
                    <el-input class="rt-input" show-password v-model="editForm.userPwd"></el-input>
                </el-form-item>

            </el-form>
            <!--      底部区域-->
            <span slot="footer" class="dialog-footer">
              <el-button @click="resetPwd">重置</el-button>
              <el-button @click="editPwd" type="primary">确定</el-button>
            </span>
        </el-dialog>


    </div>
</template>
<style>
    .rt-input /deep/ .el-input__inner {
        color: #6B6C70 !important;
        cursor: pointer;
    }

    .avatar-uploader .el-upload {
        width: 100px;
        height: 100px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        position: relative;
        left: 35%;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        position: relative;
        top: 35px;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>

<script>

    export default {
        data() {
            return {
                statusList:[
                    {
                        id: '1',
                        name: '审核通过'
                    },
                    {
                        id: '2',
                        name: '审核不通过'
                    }
                ],
                roleList: [
                    {
                        id: 'admin',
                        name: '管理员'
                    },
                    {
                        id: 'user',
                        name: '普通用户'
                    }],

                roleMap: {
                    user: '普通用户',
                    admin: '管理员'
                },
                //  图片
                file: null,
                notFound: '图片走丢了',
                uploadImageUrl: '',
                showImageUrl: '',
                fit: 'fill',
                total: 0,
                userData: [],
                garbageData: [],
                queryInfo: {
                    searchInfo: '',
                    // 当前页数
                    pagenum: 1,
                    pagesize: 7
                },
                row: '',
                showDialogVisible: false,
                editDialogVisible: false,
                checkDialogVisible: false,
                createDialogVisible: false,
                pwdEditDialogVisible: false,
                editFormRules: {
                    garbageName: [
                        {
                            require: true,
                            message: '垃圾姓名不能为空',
                            trigger: 'blur'
                        }
                    ]
                },
                editForm: {
                    "userName": '',
                    "userPhone": '',
                    "userCard": '',
                    "userPwd": '',
                    "userRole": '',
                    "formatRole": '',
                    "userPerms": '',
                    "userStatus": ''
                }
            }
        },
        created() {
            this.getUserList();
        },
        methods: {
            setRole(row, column) {
                switch (row.userRole) {
                    case "admin":
                        return '管理员'
                    case "user":
                        return '普通用户'
                }
            },
            setStatus(row, column) {
                switch (row.userStatus) {
                    case "1":
                        return '审核通过'
                    case "0":
                        return '未审核'
                    case "2":
                        return '审核不通过'
                }
            },
            async getUserList() {
                const {data: res} = await this.$http.get('/user/allUser')
                if (res.status !== 200) {
                    return this.$message.error(res.msg + '，获取垃圾信息列表失败!')
                }
                this.userData = res.data
                this.total = res.data.length
                console.log(res.data)
            },
            resetEdit() {
                const row = this.row
                this.editForm.userName = row.userName
                this.editForm.userPhone = row.userPhone
                this.editForm.userCard = row.userCard
                this.editForm.userRole = row.userRole
                this.editForm.formatRole = row.formatRole
                this.editForm.userPerms = row.userPerms
                this.editForm.userStatus = row.userStatus
                // console.log(this.garbageData())
                // this.editDialogVisible = false
            },
            resetPwd(){
                this.editForm.userPwd = null
            },
            resetCreate() {
                this.editForm.userName = null
                this.editForm.userPhone = null
                this.editForm.userCard = null
                this.editForm.userRole = null
                this.editForm.formatRole = null
                this.editForm.userPerms = null
                this.editForm.userStatus = null
            },
            handleClick(row) {
                console.log(row);
            },
            filterTag(value, row) {
                return row.userRole === value
            },
            // 查看垃圾信息的对话框
            showEditDialog(row) {
                this.showDialogVisible = true
                this.$nextTick(() => {
                    this.editForm = row
                    if (row.userRole === 'admin')
                        this.editForm.formatRole = '管理员'
                    else
                        this.editForm.formatRole = '普通用户'
                    this.row = row
                })
            },
            // 编辑垃圾信息的对话框
            editEditDialog(row) {
                this.editDialogVisible = true
                this.editForm.userId = row.userId
                this.editForm.userName = row.userName
                this.editForm.userPhone = row.userPhone
                this.editForm.userCard = row.userCard
                this.editForm.userRole = row.userRole
                this.editForm.formatRole = row.formatRole
                this.editForm.userPerms = row.userPerms
                this.editForm.userStatus = row.userStatus
                // this.editForm = row
                this.row = row
            },
            pwdEditDialog(row){
                this.editForm.userId = row.userId
                this.editForm.userName = row.userName
                this.editForm.userPhone = row.userPhone
                this.editForm.userPwd = null
                this.pwdEditDialogVisible = true
            },

            checkEditDialog(row) {
                this.checkDialogVisible = true
                this.editForm.userId = row.userId
                this.editForm.userName = row.userName
                this.editForm.userPhone = row.userPhone
                this.editForm.userCard = row.userCard
                this.editForm.userRole = row.userRole
                this.editForm.formatRole = row.formatRole
                this.editForm.userPerms = row.userPerms
                this.editForm.userStatus = row.userStatus
                // this.editForm = row
                this.row = row
            },
            // 监听对话框的关闭事件
            showDialogClosed() {
                // this.$refs.editFormRef.resetFields()

                this.showDialogVisible = false
            },
            checkDialogClosed() {
                // this.$refs.editFormRef.resetFields()
                this.checkDialogVisible = false
            },
            editDialogClosed() {
                // this.$refs.editFormRef.resetFields()
                this.editDialogVisible = false
            },
            pwdEditDialogClosed(){
              this.pwdEditDialogVisible = false
            },
            createDialogClosed() {

                // this.$refs.editFormRef.resetFields()
                this.createDialogVisible = false
            },
            // 重置修改

            // 监听 pagesize 改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                // alert(newSize)
                this.getUserList()
            },
            // 监听页码值改变的事件
            handleCurrentChange(newPage) {
                console.log(newPage)
                // alert(newPage)
                this.queryInfo.pagenum = newPage
                this.getUserList()
            },


            // 审核用户
            checkUser() {
                this.$refs.editFormRef.validate(async valid => {

                    if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.editForm.userPhone))) {
                        return this.$message.error('请输入正确的手机号！')
                    } else if (this.editForm.userName.length < 1) {
                        return this.$message.error('姓名不能为空，请检查!')
                    } else if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.editForm.userCard))) {
                        return this.$message.error('无效的身份证号，请检查!')
                    }


                    // const base64 = reader.readAsDataURL(this.file); //Base6
                    let role = this.editForm.userRole
                    if (role === 'admin')
                        this.editForm.userPerms = 'super'
                    else if (role === 'user')
                        this.editForm.userPerms = 'normal'

                    console.log(this.editForm)
                    const {data: res} = await this.$http.put('/user/check', this.editForm)
                    if (res.status !== 200) {
                        return this.$message.error(res.msg + '，修改失败!')
                    }
                    this.$message.success('修改成功！')
                    this.checkDialogVisible = false
                    this.getUserList()

                })
            },
            // 修改用户信息


            editUser() {


                this.$refs.editFormRef.validate(async valid => {

                    if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.editForm.userPhone))) {
                        return this.$message.error('请输入正确的手机号！')
                    } else if (this.editForm.userName.length < 1) {
                        return this.$message.error('姓名不能为空，请检查!')
                    } else if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.editForm.userCard))) {
                        return this.$message.error('无效的身份证号，请检查!')
                    }


                    // const base64 = reader.readAsDataURL(this.file); //Base6
                    let role = this.editForm.userRole
                    if (role === 'admin')
                        this.editForm.userPerms = 'super'
                    else if (role === 'user')
                        this.editForm.userPerms = 'normal'

                    console.log(this.editForm)
                    const {data: res} = await this.$http.put('/user/update', this.editForm)
                    if (res.status !== 200) {
                        return this.$message.error(res.msg + '，修改失败!')
                    }
                    this.$message.success('修改成功！')
                    this.editDialogVisible = false
                    this.getUserList()

                })
            },
            createDialog() {
                this.editForm.userName = null
                this.editForm.userPhone = null
                this.editForm.userCard = null
                this.editForm.userRole = null
                this.editForm.userPwd = null
                this.editForm.formatRole = null
                this.editForm.userPerms = null
                this.editForm.userStatus = null
                this.createDialogVisible = true
            },
            // 新增用户信息
            createUser() {
                this.$refs.editFormRef.validate(async valid => {

                    if (!(/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.editForm.userPhone))) {
                        return this.$message.error('请输入正确的手机号！')
                    } else if (this.editForm.userName.length < 1) {
                        return this.$message.error('姓名不能为空，请检查!')
                    } else if (!(/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(this.editForm.userCard))) {
                        return this.$message.error('无效的身份证号，请检查!')
                    }

                    const password = this.$md5(this.editForm.userPwd).toUpperCase();
                    this.editForm.userPwd = password

                    let role = this.editForm.userRole
                    if (role === 'admin')
                        this.editForm.userPerms = 'super'
                    else if (role === 'user')
                        this.editForm.userPerms = 'normal'
                    else{
                        return this.$message.error('请选择用户类型!')
                    }

                    // console.log(valid)
                    if (!valid) return
                    const {data: res} = await this.$http.post('/user/create', this.editForm)
                    if (res.status !== 200) {
                        return this.$message.error(res.msg + '，创建失败!')
                    }
                    this.$message.success('创建成功！')
                    this.createDialogVisible = false
                    this.getUserList()

                })
            },
            editPwd() {
                this.$refs.editFormRef.validate(async valid => {

                    if ((this.editForm.userPwd.length < 8) || !(/[A-Za-z].*[0-9]|[0-9].*[A-Za-z]/.test(this.editForm.userPwd))) {
                        return this.$message.error('密码强度不够，请检查!')
                    }

                    const password = this.$md5(this.editForm.userPwd).toUpperCase();

                    // console.log(valid)
                    if (!valid) return
                    const {data: res} = await this.$http.put('/user/setPwd',{
                        userPhone:this.editForm.userPhone,
                        password: password
                    })
                    if (res.status !== 200) {
                        return this.$message.error(res.msg + '，修改失败!')
                    }
                    this.$message.success('修改成功！')
                    this.pwdEditDialogVisible = false
                    this.getUserList()
                })

            },

        },

        computed: {
            pageuserlist: function () {
                var search = this.queryInfo.searchInfo
                if (search) {
                    return this.userData.filter(function (data) {
                        return Object.keys(data).some(function (key) {
                            return String(data[key]).toLowerCase().indexOf(search) > -1
                        })
                    })
                }
                return this.userData.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
            }
        }
    }
</script>
